<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/7/15
  Time: 9:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>用户管理</title>
<%--    引入样式表--%>
      <link rel="stylesheet" href="static/layui/css/layui.css">
<%--    引入js文件--%>
      <script src="static/layui/layui.js"></script>
  </head>
  <body>
  <form class="layui-form" id="addUserForm" style="display: none"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <div class="layui-form-item">
      <label class="layui-form-label">用户名</label>
      <div class="layui-input-block">
        <input type="text" name="username" placeholder="请输入用户名" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">密码</label>
      <div class="layui-input-block">
        <input type="text" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
      </div>
    </div>

    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="addUserFilter">立即提交</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
    <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
  </form>
  <form class="layui-form" id="updateUserForm" style="display: none" lay-filter="updateUserFormFilter"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
<%--    隐藏id，禁止修改id--%>
    <%--<input name="id" hidden="hidden">--%>
    <div class="layui-form-item">
      <label class="layui-form-label">用户ID</label>
      <div class="layui-input-block">
        <input type="text" name="id"   readonly="readonly" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">用户名</label>
      <div class="layui-input-block">
        <input type="text" name="username"   placeholder="请输入用户名" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">密码</label>
      <div class="layui-input-block">
        <input type="text" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
      </div>
    </div>

    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="updateUserFilter">立即提交</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
    <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
  </form>
  <form class="layui-form" style="margin-top: 10px;margin-left: 10px" lay-filter="myDiv" id="searchForm">
    姓名：
    <div class="layui-inline">
      <input id="username" class="layui-input" name="username" placeholder="姓名" autocomplete="off">
    </div>
    密码：
    <div class="layui-inline">
      <input id ="password" class="layui-input" name="password" placeholder="密码" autocomplete="off">
    </div>

    <button class="layui-btn" lay-submit="" lay-filter="selectConditionFilter" data-type="reload">搜索</button>
    <button class="layui-btn layui-btn-primary" type="reset" id="resetButton">重置</button>
  </form>
  <table id="demo" lay-filter="test">
  </table>
  <script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="update">修改</a>
  </script>
  <script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
      <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
      <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete">删除</button>
    </div>
  </script>
  </body>
    <script>
        layui.use(['layer', 'form','table','jquery'], function(){
            var layer = layui.layer;
            var form = layui.form;
            var table = layui.table;
            var $ = layui.jquery;
            //第一个实例
           var myTable= table.render({
                elem: '#demo'
                ,height: 450
                ,url: '${pageContext.request.contextPath}/myUser?method=findAllUser' //数据接口
                ,page: true //开启分页
                ,limit:5
                ,limits:[5,10,15,20,25,30]
               , toolbar: '#toolbarDemo' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
                ,autoSort: false//关闭前端自动排序，开启了后端的服务器排序
                ,cols: [[ //表头
                      {type: 'checkbox', fixed: 'left'}
                   , {field: 'id', title: 'ID', width:100, sort: true}
                    ,{field: 'username', title: '用户名', width:120}
                    ,{field: 'password', title: '密码', width:120, sort: true}
                    ,{field: 'createtime', title: '创建时间', width:180}
                  ,{fixed: 'right', width: 150, align:'center', toolbar: '#barDemo'}
                ]]
            });

          //触发排序事件
          table.on('sort(test)', function(obj){ //注：sort 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            console.log(obj.field); //当前排序的字段名
            console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
            console.log(this); //当前排序的 th 对象

            //尽管我们的 table 自带排序功能，但并没有请求服务端。
            //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
            table.reload('demo', {
              initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
              ,where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                field: obj.field //排序字段
                ,order: obj.type //排序方式
              }
            });
          });

          form.on('submit(selectConditionFilter)', function(data){
            console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            myTable.reload({
              where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                searchUsername: data.field.username //排序字段
                ,searchPassword:data.field.password//排序方式

              },
              page: {
                curr: 1 //重新从第 1 页开始
              }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
          });
          //重置条件查询表单，刷新table数据
          $("#resetButton").click(function () {
            myTable.reload({
              where: { //设定异步数据接口的额外参数，任意设
                searchUsername: "" //条件一
                ,searchPassword:""//条件二

              },
              page: {
              curr: 1 //重新从第 1 页开始
            }

            });
          });
          //监听头工具栏事件
          table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id)
                    ,data = checkStatus.data; //获取选中的数据
            switch(obj.event){
              case 'add':
                layer.open({
                  title:'添加用户',
                  type: 1,
                  area: ['400px', '220px'],
                  content: $('#addUserForm') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                });
                break;
              case 'delete':
                if(data.length === 0){
                  layer.msg('请选择一行');
                } else {
                  console.log(data)
                  //ids封装所有选中的id
                  var ids = [];
                  for (let i = 0; i < data.length; i++) {
                    ids[i] = data[i].id;
                  }

                  layer.confirm('真的删除行么', function(index) {
                    //服务器端删除数据
                    $.ajax({
                      url: "myUser?method=deleteUserBatch",//路径
                      data: {id: ids.join(",")},//传递给后台的参数，join将数组成员以‘，’分隔，转换成字符串
                      dataType: "json",//相应的数据类型：服务器给我的
                      type: "post",
                      success: function (data) {
                        //成功的响应函数  ：dataInfo名字随便写，代表的是服务器相应的内容
                        if (data.code == 0) {
                          //关闭对话框
                          layer.closeAll();
                          //提示操作成功
                          layer.msg(data.msg, {icon: 6});
                          //刷新表格数据
                          //刷新表格数据
                          myTable.reload({
                            page: {
                              curr: 1 //重新从第 1 页开始
                            }
                          });
                        } else {
                          layer.msg(data.msg, {icon: 5});
                        }

                      }
                    })
                  })
                }
                break;
            };
          });
          //监听行工具事件
          table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                    ,layEvent = obj.event; //获得 lay-event 对应的值
            console.log(data.id);
            if(layEvent === 'delete'){
              layer.confirm('真的删除行么', function(index) {
                /* obj.del(); //删除对应行（tr）的DOM结构*/
                //向服务端发送删除指令
                $.ajax({
                  url: "myUser?method=deleteUser",//路径
                  data: {id: data.id},//传递给后台的参数
                  dataType: "json",//相应的数据类型：服务器给我的
                  type: "post",
                  success: function (data) {
                    //成功的响应函数  ：dataInfo名字随便写，代表的是服务器相应的内容
                    if (data.code == 0) {
                      //关闭对话框
                      layer.closeAll();
                      //提示操作成功
                      layer.msg(data.msg, {icon: 6});
                      //刷新表格数据
                      //刷新表格数据
                      myTable.reload({
                        page: {
                          curr: 1 //重新从第 1 页开始
                        }
                      });
                    } else {
                      layer.msg(data.msg, {icon: 5});
                    }

                  }
                })

              })
            } else if(layEvent === 'update'){
              //优先填充数据到修改页面中
              form.val('updateUserFormFilter', {
                "id": data.id // "name": "value"
                ,"username": data.username
                ,"password": data.password
              });
              layer.open({
                title:'修改用户',
                type: 1,
                area: ['400px', '260px'],
                content: $('#updateUserForm') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
              });

            }
          });

          form.on('submit(addUserFilter)', function(data){
         /*   console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}*/
           //保存数据到数据库中
            $.ajax({
              url:"myUser?method=addUser",//路径
              data:data.field,//传递给后台的参数
              dataType:"json",//相应的数据类型：服务器给我的
              type:"post",
              success:function (data) {
                //成功的响应函数  ：dataInfo名字随便写，代表的是服务器相应的内容
                console.log(data);
                if(data.code==0){
                  //关闭对话框
                  layer.closeAll();
                  //提示操作成功
                  layer.msg(data.msg,{icon: 6});
                  //刷新表格数据
                  //刷新表格数据
                  myTable.reload({
                    page: {
                      curr: 1 //重新从第 1 页开始
                    }
                  });
                }else{
                  layer.msg(data.msg,{icon: 5});
                }

              }
            })

            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
          });
          form.on('submit(updateUserFilter)', function(data){

           //保存数据到数据库中
            $.ajax({
              url:"myUser?method=updateUser",//路径
              data:data.field,//传递给后台的参数
              dataType:"json",//相应的数据类型：服务器给我的
              type:"post",
              success:function (data) {
                //成功的响应函数  ：dataInfo名字随便写，代表的是服务器相应的内容
                console.log(data);
                if(data.code==0){
                  //关闭对话框
                  layer.closeAll();
                  //提示操作成功
                  layer.msg(data.msg,{icon: 6});
                  //刷新表格数据
                  //刷新表格数据
                  myTable.reload({
                    page: {
                      curr: 1 //重新从第 1 页开始
                    }
                  });
                }else{
                  layer.msg(data.msg,{icon: 5});
                }

              }
            })

            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
          });


        });
    </script>
</html>
